<template>
  <div class="home_div">

    <div id="container"></div>
</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'HotelSystemMap',
  props: ['hotelAddress'],
  data () {
    return {
      address: '', // 父组件传过来的地址
      map: null

    }
  },

  mounted () {
    // 初始化地图实例
    this.initAMap()
  },
  watch: {
    hotelAddress: {
      handler (newVal, oldVal) {
        // console.log('地质变化:', newVal, oldVal)
        this.address = newVal
      },
      immediate: true
    }
  },
  methods: {
    initAMap () {
      AMapLoader.load({
        key: '09a3b5266284dd13cda2392545575657', // 设置您的key
        version: '2.0',
        plugins: ['AMap.PlaceSearch', 'AMap.Scale', 'AMap.ToolBar', 'AMap.Driving', 'AMap.CitySearch']
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 16 // 地图级别
        })
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 1, // 单页显示结果条数
          city: '全国',
          citylimit: false, // 是否强制限制在设置的城市内搜索
          map: this.map, // 展现结果的地图实例
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        placeSearch.search(this.hotelAddress)
        const toolbar = new AMap.ToolBar() // 缩放工具条实例化
        this.map.addControl(toolbar)
        const scale = new AMap.Scale()
        this.map.addControl(scale)
      }).catch(e => {
        console.log(e)
      })
    }
  },
  destroyed () {
    // 离开页面销毁地图容器
    this.map.destroy()
    this.map = null
  }
}
</script>

<style lang="less" scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}

</style>
